<template>
	<view class="guide">
		<template v-if="skip">
			<view class="skip flex-center" @click="goHome">
				<text>{{times}} </text>
				<text class="line"></text>
				<text>跳过</text>
			</view>
		</template>
		<template v-if="guideStatus">
			<view class="guide-box flex">
				<view class="img-box flex  flex-end">
					<!-- <image src="@/static/images/pres/presbg.png" mode="widthFix"></image> -->
				</view>
			<!-- 	<m-block class="block-logo flex-center" gap="30 0" bgColor="#fff" radius="0">
					<m-icon type="logo2" wh="248 84"></m-icon>
				</m-block> -->
			</view>
		</template>
		<template v-else>
			<view class="swiper-box flex-column">
				<swiper class="swiper" :current="current" @change="change">
					<swiper-item class="guide-1 flex flex-column flex-around">
						<image src="@/static/images/components/guide1.png" mode="widthFix"></image>
						<image src="@/static/images/components/title1.png" mode="widthFix"></image>
					</swiper-item>
					<swiper-item class="guide-1 flex-column flex-around ">
						<image src="@/static/images/components/guide2.png" mode="widthFix"></image>
						<image src="@/static/images/components/title1.png" mode="widthFix"></image>
					</swiper-item>
					<swiper-item class="guide-1 flex-column flex-around  ">
						<image src="@/static/images/components/guide3.png" mode="widthFix"></image>
						<image src="@/static/images/components/title1.png" mode="widthFix"></image>
					</swiper-item>
				</swiper>
				<view class="circular flex-center">
					<view class="dian flex" v-if="current<=1">
						<text :class="{'active':current == 0}"></text>
						<text :class="{'active':current == 1}"></text>
						<text :class="{'active':current == 2}"></text>
					</view>
					<view class="" v-else>
						<m-button @click='goHome'>立即体验</m-button>
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import Updater from '@/utils/upgrade.js'
	import { UserInfo } from '@/api/Users.js'
	export default {
		name: "m-guide",
		data() {
			return {
				current: 0,
				guide: [],
				guideStatus: false,

				timer: 0,
				times: 3,
				skip: false,
			};
		},
		beforeDestroy() {
			this.clearTime();
		},
		mounted() {
			this.init();
		},
		methods: {
			async init() {
				// //判断是不是第一次启动  先设置语言
				const { isUpdate } = await Updater.check();
				this.guideStatus = this.Cookie.get('guide', false);
				if (isUpdate || !this.guideStatus) return
				this.skip = true; //跳过按钮
				this.timeOut();
			},
			clearTime() {
				clearTimeout(this.timer);
			},
			timeOut() {
				this.clearTime();
				if (this.times == 0) {
					this.goHome();
					return
				}
				this.timer = setTimeout(() => {
					this.times--;
					this.timeOut();
				}, 1000)
			},
			async goHome() {
				this.clearTime();

				this.Cookie.set('guide', true)

				if (this.Cookie.get('Token')) {
					await UserInfo();
					
					this.Jump({
						url: '/pages/home/home',
						mode: 4
					})
					return
				}
				
				this.Jump({
					url: '/pages/login/login',
					mode: 3
				})
				
			},
			change({ detail: { current } }) {
				this.current = current;
			},
		},
	}
</script>

<style lang="scss">
	.guide {
		height: 100vh;
		// background: linear-gradient(131deg, #00A8EC 1.513671875%,#DEF6FF 100%);
	}

	.guide-box {
		height: 100vh;
		padding: 100rpx 0 0;
		box-sizing: border-box;
		background-size: 100% 100%;
		text-align: center;
		.img-box{
			width: 100%;
			height: 100%;
			text-align: center;
			background: url('@/static/images/components/presbg.png') no-repeat;
			background-size: 90% 80%;
			background-position: center center;
			
			image{
				display: block;
			}
		}
		
		.block-logo{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
		}

	}


	.swiper-box {
		height: 100%;
		background: #fff;

		.swiper {
			height: 100%;
			.guide-1 {
				padding: 50rpx;
				box-sizing: border-box;
				image {
					z-index: 1;
				}
				view{
					width: 100%;
					padding-top: 50rpx;
				}
				
			}
		}

		.circular {
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 99;
			width: 100%;
			padding: 25rpx 0 60rpx;
			padding-bottom: calc(80rpx + var(--window-bottom));
			color: #fff;
			height: 210rpx;

			.dian {

				text {
					margin: 0px 10rpx;
					display: inline-block;
					width: 100rpx;
					height: 4rpx;
					background: rgba(27, 162, 122, .3);
					border-radius: 20rpx;
				}

				.active {
					background: rgba(27, 162, 122, 1);
				}

				text+text {
					margin-left: 14rpx;
				}
			}

			.m-button {
				font-size: 34rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
				padding: 20rpx 100rpx;
			}
		}
	}

	.skip {
		position: fixed;
		z-index: 99;
		right: 24rpx;
		/* #ifdef H5 */
		top: 24rpx;
		/* #endif */

		/* #ifdef APP-PLUS */
		top: calc(var(--status-bar-height) + 24rpx);
		/* #endif */
		background: rgba(130, 130, 130, 0.3) !important;
		border-radius: 50rpx;
		padding: 12rpx 24rpx;

		text{
			font-size: 26rpx ;
			font-family: PingFang SC ;
			font-weight: 400 ;
			color: #fff ;
		}

		.line {
			display: block !important;
			width: 2rpx !important;
			height: 28rpx !important;
			background: #fff !important;
			margin: 0 15rpx !important;
		}

	}
</style>